import React, { Component } from 'react';
import { toast, cacheTools } from 'nc-lightapp-front';
import { hrAjax as ajax } from 'src/hrpub/common/utils/utils';
import PG from 'src/hrcm/contractmgt/terminate/main/components/footer/index';
import EmptyData from 'src/hrpub/common/components/emptyImg';
import { format } from 'util';
class MainTable extends Component {
	constructor(props) {
		super(props);
		this.state = {
			pageIndex: 1,
			pageSize: 10,
			total: 1,
			totalPage: 1
		};
		this.getTableData = this.getTableData.bind(this);
		this.changePage = this.changePage.bind(this);
		this.onShowSizeChange = this.onShowSizeChange.bind(this);
		this.toCardBrowse = this.toCardBrowse.bind(this);
	}
	componentDidMount() {
		// let storage = JSON.parse(localStorage.getItem('pageQueryParam')),
		// 	node = '';
		// if (storage) {
		// 	if (storage.hasOwnProperty('terminate')) {
		// 		node = 'terminate';
		// 	}
		// 	if (storage.hasOwnProperty('end')) {
		// 		node = 'end';
		// 	}
		// }
		// if (node) {
		// 	this.props.updateState({
		// 		hrorgobj: storage[node].hrorgobj,
		// 		pkOrg: storage[node].hrorgobj.refpk
		// 	});
		// }
	}
	/* 
        table pagination
    */
	changePage(page) {
		this.setState(
			{
				pageIndex: page
			},
			() => {
				this.getTableData();
			}
		);
	}
	/* pagesize change */
	onShowSizeChange(pageSize) {
		this.setState(
			{
				pageSize: pageSize
			},
			() => {
				this.getTableData();
			}
		);
	}
	/* 
        获取列表数据方法
        异步
    */
	getTableData() {
		const {
			editTable,
			areaCode,
			URLS,
			pagecode,
			pkOrg,
			updateState,
			appcode,
			searchData,
			showMode,
			cardViewId
		} = this.props;
		const { pageIndex, pageSize } = this.state;
		let storage = JSON.parse(localStorage.getItem('pageQueryParam')),
			node = '',
			code = [];
		if (storage) {
			if (storage.hasOwnProperty('terminate')) {
				node = 'terminate';
				code = storage[node].pk_psndoc_subs;
			}
			if (storage.hasOwnProperty('end')) {
				node = 'end';
				code = storage[node].pk_psndoc_subs;
			}
		}
		if (!pkOrg) return;
		if (showMode !== 'list-browse') {
			code = [ cardViewId ];
		}
		let params = {
			pk_org: pkOrg,
			pageCode: pagecode,
			appCode: appcode,
			areaCode: areaCode.table,
			pageInfo: {
				pageIndex: pageIndex,
				pageSize: pageSize
			},
			queryType: code.length ? 1 : 0, // all: 0, single: 1
			pkPsndocSub: code
		};
		Object.assign(params, searchData);
		ajax({
			url: URLS.list,
			data: params,
			success: (res) => {
				let _list_ = [];
				if (res && res.data && res.data[areaCode.table]) {
					_list_ = res.data[areaCode.table];
					this.setState({
						total: parseInt(_list_.pageInfo.total)
					});
					updateState(
						{
							hasListData: true
						},
						function() {
							if (showMode !== 'list-browse') {
								this.setFormData('', _list_.rows[0]);
							} else {
								cacheTools.set('allpks', _list_.allpks);
								editTable.setTableData(areaCode.table, _list_);
							}
						}
					);
				} else {
					updateState({
						hasListData: false
					});
					this.setState({
						total: 1
					});
					editTable.setTableData(areaCode.table, { rows: [] });
					cacheTools.set('allpks', []);
				}
				if (storage) localStorage.removeItem('pageQueryParam');
			},
			error(res) {
				toast({ color: 'danger', content: res.toString() });
				if (storage) localStorage.removeItem('pageQueryParam');
			}
		});
	}
	toCardBrowse(record) {
		const { updateState, editTable, areaCode } = this.props;
		const allData = editTable.getAllData(areaCode.table);
		const index = allData.rows.findIndex(
			(item) => item.values.pk_psndoc_sub.value === record.values.pk_psndoc_sub.value
		);
		// setTimeout(() => {
		// 	updateState(
		// 		{
		// 			showMode: 'card-browse',
		// 			cardViewId: record.values.pk_psndoc_sub.value
		// 		},
		// 		function() {
		// 			this.setFormData('', record, index);
		// 		}
		// 	);
		// }, 0);
		updateState(
			{
				showMode: 'card-browse',
				cardViewId: record.values.pk_psndoc_sub.value
			},
			function() {
				this.setFormData('', record, index);
			}
		);
	}
	getHeight = () => {
		let wH = window.innerHeight,
			gap = 150;
		return wH - gap;
	};
	render() {
		const { editTable, showMode, areaCode, pkOrg, json, hasListData } = this.props;
		let H = this.getHeight();
		return (
			<div className="ncc-table">
				{!pkOrg && <EmptyData text={json['cm6011-000035']} height={H} />}
				<div style={{display: pkOrg && showMode === 'list-browse' ? '' : 'none'}}>
					{
						editTable.createEditTable(areaCode.table, {
							showCheck: true,
							cancelCustomRightMenu: true,
							showIndex: true,
							height: H,
							onRowDoubleClick: this.toCardBrowse
						})
					}
				</div>
				<PG
					pkOrg={pkOrg}
					{...this.state}
					showMode={showMode}
					hasListData={hasListData}
					onChange={this.changePage}
					onShowSizeChange={this.onShowSizeChange}
				/>
			</div>
		);
	}
}

export default MainTable;
